import { logout } from '@/services/user/user';
import { getUerInfo, removeToken } from '@/utils/info';
import { DownOutlined } from '@ant-design/icons';
import { history, useLocation, useModel } from '@umijs/max';
import type { MenuProps } from 'antd';
import { Avatar, Badge, Button, Dropdown, Input, Space } from 'antd';
import styles from './style.less';
import LoginButton from '@/components/LoginButton';
import { useState,useMemo } from 'react';
import { noticeFileds } from '@/constants/array';
import { UserOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';

const { Search } = Input;
export default () => {
  const { menuShow,userInfo,noticeNum,changeUserInfo } = useModel('global');
  const {pathname} = useLocation();
  const [search, setSearch] = useState('');
  const { run: logoutFun } = useRequest(logout,
    {
      manual: true,
      onFinally:(res)=>{
        removeToken();
        changeUserInfo({})
        if(!pathname.startsWith('/home')){
          history.push('/home')
        }
      }
    },
  );

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: <span>修改密码</span>,
    },
    {
      key: '2',
      label: <span onClick={logoutFun}>退出登录</span>,
    },
  ];
  const noticeItems = useMemo(()=>{
    return noticeFileds.map((item)=> ({
      key:item.key,
      label:<Badge   count={noticeNum[item.key]||0} size="small" offset={[0,7]} onClick={()=>{
        history.push(`/notice?type=${item.key}`)
      }}>
       <span style={{paddingRight:'20px'}}>{item.label}</span>
    </Badge>
    }))
  },[noticeNum])
  return (
    <div className={`${styles.header} ${menuShow||true ? styles.showHeader : styles.hiddenHeader}`}>
      <div className={styles.content}>
        <span className={styles.title}>IT技术论坛</span>
        <ul className={styles.navList}>
          <li className={`${styles.navItem} ${pathname.startsWith('/home')&&styles.active}`} onClick={() => { history.push('/') }}>首页</li>
        </ul>
        <Search className={styles.search} value={search} onChange={(e) => {
          setSearch(e.target.value)
        }} placeholder="搜索" onSearch={() => {
          if(!search) return
          history.push(`/search?query=${search}`)
        }} enterButton />
      
        <div className={styles.userInfo}>
          <LoginButton >
            <div className={styles.userAuthBtn}>
            <Button type="primary" className={styles.btn} onClick={() => {
          //创建一个新的标签页
          history.push('/creator')
        }}>创作中心</Button>
              <Dropdown menu={{ items:noticeItems }}>
                <Space onClick={()=>{
                  history.push('/notice')
                }}>
                  <Badge count={noticeNum.totalCount} size="small">
                    <i  className={`iconfont icon-tongzhi ${styles.notice}`}></i>
                  </Badge>
                </Space>
              </Dropdown>
              <Dropdown menu={{ items }}>
                <Space onClick={()=>{
                  history.push(`/user/${userInfo.id}`);
                }} style={{cursor:'pointer'}}>
                  
                  {
                    !!userInfo.avatar ?<Avatar size={24} icon={<UserOutlined />} src={userInfo.avatar} />:userInfo.nickname
                  }
                  <DownOutlined />
                </Space>
              </Dropdown>
            </div>
          </LoginButton>
        </div>


      </div>

    </div>
  );
};
